<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}SurveyAnalyzer{% endblock %}</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <!-- Plotly.js -->
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    
    <style>
        :root {
            --primary-color: #2c3e50;
            --secondary-color: #3498db;
            --accent-color: #e74c3c;
            --success-color: #27ae60;
            --warning-color: #f39c12;
            --light-bg: #f8f9fa;
            --dark-bg: #343a40;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: var(--light-bg);
        }
        
        .navbar {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .navbar-brand {
            font-weight: bold;
            font-size: 1.5rem;
        }
        
        .sidebar {
            background: white;
            min-height: calc(100vh - 76px);
            box-shadow: 2px 0 10px rgba(0,0,0,0.1);
            padding: 0;
        }
        
        .current-file-info {
            margin: 15px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 8px;
            padding: 12px;
            color: white;
        }
        
        .file-info-header {
            display: flex;
            align-items: center;
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 8px;
        }
        
        .file-info-header i {
            margin-right: 8px;
            color: #ffd700;
        }
        
        .file-info-content {
            color: #fff;
        }
        
        .file-name {
            font-size: 13px;
            font-weight: 500;
            margin-bottom: 4px;
            word-break: break-all;
        }
        
        .file-details {
            font-size: 11px;
            opacity: 0.8;
            line-height: 1.3;
        }
        
        .sidebar .nav-link {
            color: var(--primary-color);
            padding: 15px 20px;
            border-bottom: 1px solid #eee;
            transition: all 0.3s ease;
        }
        
        .sidebar .nav-link:hover {
            background-color: var(--light-bg);
            color: var(--secondary-color);
            transform: translateX(5px);
        }
        
        .sidebar .nav-link.active {
            background-color: var(--secondary-color);
            color: white;
        }
        
        .main-content {
            padding: 30px;
            background: white;
            margin: 20px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .card {
            border: none;
            border-radius: 10px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }
        
        .card:hover {
            transform: translateY(-5px);
        }
        
        .btn-primary {
            background: linear-gradient(135deg, var(--secondary-color), #2980b9);
            border: none;
            border-radius: 25px;
            padding: 10px 25px;
            transition: all 0.3s ease;
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4);
        }
        
        .alert {
            border: none;
            border-radius: 10px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.1);
        }
        
        .progress {
            height: 8px;
            border-radius: 10px;
        }
        
        .table {
            border-radius: 10px;
            overflow: hidden;
        }
        
        .table thead {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
        }
        
        .footer {
            background: var(--dark-bg);
            color: white;
            padding: 20px 0;
            margin-top: 50px;
        }
        
        .loading {
            display: none;
            text-align: center;
            padding: 20px;
        }
        
        .spinner-border {
            color: var(--secondary-color);
        }
        
        .chart-container {
            position: relative;
            height: 400px;
            margin: 20px 0;
        }
        
        .stats-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 20px;
        }
        
        .stats-card .stats-number {
            font-size: 2.5rem;
            font-weight: bold;
        }
        
        .feature-card {
            text-align: center;
            padding: 30px 20px;
            transition: all 0.3s ease;
        }
        
        .feature-card:hover {
            background-color: var(--light-bg);
        }
        
        .feature-icon {
            font-size: 3rem;
            color: var(--secondary-color);
            margin-bottom: 20px;
        }
        
        @media (max-width: 768px) {
            .sidebar {
                position: fixed;
                top: 76px;
                left: -250px;
                width: 250px;
                z-index: 1000;
                transition: left 0.3s ease;
            }
            
            .sidebar.show {
                left: 0;
            }
            
            .main-content {
                margin: 10px;
                padding: 20px;
            }
        }
    </style>
    
    {% block extra_css %}{% endblock %}
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="{{ url_for('main.index') }}">
                <i class="fas fa-chart-line me-2"></i>
                SurveyAnalyzer
            </a>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('main.help_page') }}">
                            <i class="fas fa-question-circle me-1"></i>
                            帮助
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('main.about') }}">
                            <i class="fas fa-info-circle me-1"></i>
                            关于
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    
    <div class="container-fluid">
        <div class="row">
            <!-- 侧边栏 -->
            <div class="col-md-3 col-lg-2 px-0">
                <div class="sidebar">
                    <!-- 当前文件信息 -->
                    <div class="current-file-info" id="currentFileInfo" style="display: none;">
                        <div class="file-info-header">
                            <i class="fas fa-file-csv"></i>
                            <span>当前数据文件</span>
                        </div>
                        <div class="file-info-content">
                            <div class="file-name" id="currentFileName"></div>
                            <div class="file-details" id="currentFileDetails"></div>
                        </div>
                    </div>
                    
                    <nav class="nav flex-column">
                        <a class="nav-link {{ 'active' if request.endpoint == 'main.index' }}" href="{{ url_for('main.index') }}">
                            <i class="fas fa-home me-2"></i>
                            首页
                        </a>
                        <a class="nav-link {{ 'active' if request.endpoint == 'main.upload_file' }}" href="{{ url_for('main.upload_file') }}">
                            <i class="fas fa-upload me-2"></i>
                            数据上传
                        </a>
                        <a class="nav-link {{ 'active' if request.endpoint == 'main.analyze' }}" href="{{ url_for('main.analyze') }}">
                            <i class="fas fa-chart-bar me-2"></i>
                            数据分析
                        </a>
                        <a class="nav-link {{ 'active' if request.endpoint == 'main.visualize' }}" href="{{ url_for('main.visualize') }}">
                            <i class="fas fa-chart-pie me-2"></i>
                            数据可视化
                        </a>
                        <a class="nav-link {{ 'active' if request.endpoint == 'main.cluster' }}" href="{{ url_for('main.cluster') }}">
                            <i class="fas fa-project-diagram me-2"></i>
                            聚类分析
                        </a>
                        <a class="nav-link {{ 'active' if request.endpoint == 'main.ai_analysis' }}" href="{{ url_for('main.ai_analysis') }}">
                            <i class="fas fa-brain me-2"></i>
                            AI智能分析
                        </a>
                        <a class="nav-link {{ 'active' if request.endpoint == 'main.advanced' }}" href="{{ url_for('main.advanced') }}">
                            <i class="fas fa-cogs me-2"></i>
                            高级分析
                        </a>
                        <a class="nav-link {{ 'active' if request.endpoint == 'main.reports' }}" href="{{ url_for('main.reports') }}">
                            <i class="fas fa-file-alt me-2"></i>
                            报告
                        </a>
                    </nav>
                </div>
            </div>
            
            <!-- 主内容区 -->
            <div class="col-md-9 col-lg-10">
                <div class="main-content">
                    <!-- 面包屑导航 -->
                    {% block breadcrumb %}{% endblock %}
                    
                    <!-- 消息提示 -->
                    {% with messages = get_flashed_messages(with_categories=true) %}
                        {% if messages %}
                            {% for category, message in messages %}
                                <div class="alert alert-{{ 'danger' if category == 'error' else category }} alert-dismissible fade show" role="alert">
                                    {{ message }}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                                </div>
                            {% endfor %}
                        {% endif %}
                    {% endwith %}
                    
                    <!-- 页面内容 -->
                    {% block content %}{% endblock %}
                </div>
            </div>
        </div>
    </div>
    
    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h5>SurveyAnalyzer</h5>
                    <p>专业的问卷调查数据分析工具</p>
                </div>
                <div class="col-md-6 text-end">
                    <p>&copy; 2024 SurveyAnalyzer. All rights reserved.</p>
                    <p>Version 2.0.0</p>
                </div>
            </div>
        </div>
    </footer>
    
    <!-- 加载提示 -->
    <div class="loading" id="loading">
        <div class="spinner-border" role="status">
            <span class="visually-hidden">加载中...</span>
        </div>
        <p class="mt-2">正在处理，请稍候...</p>
    </div>
    
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <!-- 通用JavaScript -->
    <script>
        // 显示加载提示
        function showLoading() {
            document.getElementById('loading').style.display = 'block';
        }
        
        // 隐藏加载提示
        function hideLoading() {
            document.getElementById('loading').style.display = 'none';
        }
        
        // 检查并显示当前文件信息
        function checkCurrentFile() {
            fetch('/api/current-file')
                .then(response => response.json())
                .then(data => {
                    if (data.success && data.file_info) {
                        const fileInfo = data.file_info;
                        document.getElementById('currentFileName').textContent = fileInfo.filename;
                        document.getElementById('currentFileDetails').innerHTML = 
                            `${fileInfo.rows} 行 × ${fileInfo.columns} 列<br>上传时间: ${fileInfo.upload_time}`;
                        document.getElementById('currentFileInfo').style.display = 'block';
                    } else {
                        document.getElementById('currentFileInfo').style.display = 'none';
                    }
                })
                .catch(error => {
                    console.log('获取文件信息失败:', error);
                    document.getElementById('currentFileInfo').style.display = 'none';
                });
        }
        
        // 文件上传处理
        function handleFileUpload(input) {
            const file = input.files[0];
            if (file) {
                const fileName = file.name;
                const fileSize = (file.size / 1024 / 1024).toFixed(2);
                const fileInfo = document.getElementById('file-info');
                if (fileInfo) {
                    fileInfo.innerHTML = `
                        <div class="alert alert-info">
                            <i class="fas fa-file me-2"></i>
                            已选择文件: ${fileName} (${fileSize} MB)
                        </div>
                    `;
                }
            }
        }
        
        // AJAX请求封装
        function makeRequest(url, method = 'GET', data = null) {
            return fetch(url, {
                method: method,
                headers: {
                    'Content-Type': 'application/json',
                },
                body: data ? JSON.stringify(data) : null
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                return response.json();
            });
        }
        
        // 错误处理
        function handleError(error) {
            console.error('Error:', error);
            hideLoading();
            
            const alertDiv = document.createElement('div');
            alertDiv.className = 'alert alert-danger alert-dismissible fade show';
            alertDiv.innerHTML = `
                <i class="fas fa-exclamation-triangle me-2"></i>
                操作失败: ${error.message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            `;
            
            const container = document.querySelector('.main-content');
            container.insertBefore(alertDiv, container.firstChild);
        }
        
        // 成功提示
        function showSuccess(message) {
            const alertDiv = document.createElement('div');
            alertDiv.className = 'alert alert-success alert-dismissible fade show';
            alertDiv.innerHTML = `
                <i class="fas fa-check-circle me-2"></i>
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            `;
            
            const container = document.querySelector('.main-content');
            container.insertBefore(alertDiv, container.firstChild);
        }
        
        // 移动端侧边栏切换
        function toggleSidebar() {
            const sidebar = document.querySelector('.sidebar');
            sidebar.classList.toggle('show');
        }
        
        // 页面加载完成后的初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 检查当前文件
            checkCurrentFile();
            // 自动隐藏提示消息
            setTimeout(function() {
                const alerts = document.querySelectorAll('.alert');
                alerts.forEach(function(alert) {
                    if (alert.classList.contains('alert-success') || alert.classList.contains('alert-info')) {
                        const bsAlert = new bootstrap.Alert(alert);
                        bsAlert.close();
                    }
                });
            }, 5000);
            
            // 表单验证
            const forms = document.querySelectorAll('.needs-validation');
            forms.forEach(function(form) {
                form.addEventListener('submit', function(event) {
                    if (!form.checkValidity()) {
                        event.preventDefault();
                        event.stopPropagation();
                    }
                    form.classList.add('was-validated');
                });
            });
        });
    </script>
    
    {% block extra_js %}{% endblock %}
</body>
</html>